<template>
	<!-- 主体 -->
	<view class="patient">
		<view>
			<view>
				<view><span>{{dangqian.name}}</span></view>
				<view><uni-tag :circle="true" text="本人" type="primary" size="mini" /></view>
			</view>
			<view>{{dangqian.sfz}}</view>
		</view>
		
		<view  @click="toggle('bottom')">
			<view>
				<uni-icons custom-prefix="iconfont" type="icon-shouye-tianchong" size="30"></uni-icons>
			</view>
			<view>切换就诊人</view>
		</view>
	</view>
	<!-- 详情 -->
	<view class="xiangqing">
		<uni-group  top="10" mode='card'>
		    <view class="fz">
				<text>就诊科室</text>
				<text>消化内科-门诊3楼东区501</text>
			</view>
		</uni-group>
		<uni-group  top="10" mode='card'>
		    <view class="fz">
				<text>医  &nbsp;  &nbsp;  生&nbsp;</text>
				<text>赵马</text>
			</view>
		</uni-group>
		<uni-group  top="10" mode='card'>
		    <view class="fz">
				<text>我的序号 </text>
				<text>110</text>
			</view>
		</uni-group>
	</view>
	<!-- 排队 -->
	<view class="paidui">
		<image src="../../../../static/logo.png" mode="aspectFit"></image>
		<view>前方排队人数</view>
		<view>5</view>
	</view>
	<!-- 更新 -->
	<button class="anni" @click="genxin">更新</button>
	
<!-- 弹框 -->
	<view class="tankuang">
				<uni-popup ref="popup" background-color="#fff"  :mask-click="false">
					<view class="text">
						<view>
								<view>
									<text>选择就诊人</text>
								</view>
								<view>
									<uni-icons custom-prefix="iconfont" type="icon-shouye-tianchong" size="20" @click="close"></uni-icons>
								</view>
						</view>
						<view>
							<uni-list>
									<uni-list-item showArrow @click="huanren(binren[index])" clickable v-for="( name, index) in binren" :key="index" >
										<template v-slot:header>
											<view class="patient_tk">
												<view>
													<view>
														<view><span>{{name.name}}</span></view><!-- {{binren[index].name}}也可以 -->
														<view><uni-tag :circle="true" text="本人" type="primary" size="mini" /></view>
													</view>
													<view>{{binren[index].sfz}}</view>
												</view>
											</view>
										</template>
									</uni-list-item>
							</uni-list>
						</view>
						
					</view>
				</uni-popup>
	</view>
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				dangqian:{
					name:'江峰',
					sfz:'622*********0909'
				},
				binren:[
					{
						name:'江峰',
						sfz:'622*********0909'
					},
					{
						name:'霸气侧漏',
						sfz:'888*********6688'
					},
					{
						name:'霸气侧漏',
						sfz:'888*********6688'
					},
					{
						name:'霸气侧漏',
						sfz:'888*********6688'
					}
				]
			}
		},
		methods: {
			
			toggle(type) {
							this.type = type
							// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性,ref="popup"控制弹框状态
							this.$refs.popup.open(type)
						},
			close() {
									this.$refs.popup.close()
								},
			huanren(i){
				this.$refs.popup.close()
				console.log(this.dangqian)
				console.log(i)
				this.dangqian=i
				console.log(this.dangqian)
			},
				
			genxin(){
				console.log(1)
				uni.showToast({
					title: '更新',
					icon: 'loading',
					duration: 2000
				})
			}
		},
		/* onReady :function(){
			this.$refs.popup.open('bottom')//这里可以做到，一进组件，就弹框。
		} */
	}
</script>

<style lang="less">
.patient{
	margin: 40rpx;
	border: solid 1rpx rgb(245,249,255);
	border-radius: 10rpx;
	background-color: rgb(245,249,255);
	padding:60rpx 20rpx;
	display: flex;
	justify-content:space-between;
	align-items: center;
	
	>view:nth-child(1){
		
		>view:nth-child(1){
			display: flex;
			align-items: center;
		}
		>view:nth-child(2){
			font-size: 20rpx;
			color: rgb(177,177,178);
		}
	}
	
	>view:nth-child(2){
		font-size: 20rpx;
		>view{
			text-align: center;
		}
	}
}

.patient_tk{
	border: solid 1rpx rgb(245,249,255);
	border-radius: 10rpx;
	background-color: rgb(245,249,255);
	display: flex;
	justify-content:space-between;
	align-items: center;
	
	>view:nth-child(1){
		
		>view:nth-child(1){
			display: flex;
			align-items: center;
		}
		>view:nth-child(2){
			font-size: 20rpx;
			color: rgb(177,177,178);
		}
	}
}

.text{
	
	>view:nth-child(1){
		text-align: center;
		display: flex;
		height: 100rpx;
		justify-content:space-between;
		align-items: center;
		>view:nth-of-type(1){
			flex:10;
		}
		>view:nth-of-type(2){
			flex: 1;
		}
	}
}

.fz{
	font-size: 25rpx;
	text{
		margin: 0 20rpx;
	}
	>text:nth-child(1){
		color: rgb(192, 187, 178);
		
	}
	>text:nth-child(2){}
}

.paidui{
	margin:100rpx 25%;
	image{
		width: 100%;
		/* position: absolute; */
		opacity: 1;
		z-index: -1;
		
	}
	>view{
		position: relative;
		top:-300rpx;
		text-align: center;
		color: white;
	}
	>view:nth-child(2){
		font-size: 24rpx;
	}
	>view:nth-child(3){
		font-size: 50rpx;
	}
}

.anni{
	margin: 0 40rpx;
	background-color: rgb(0, 110, 255);
	color: white;
}
</style>
